import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col, Select, DatePicker } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class WeeklyForm extends Component {

  componentWillMount() {
    console.log(this.props.projectInfo)
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values);
      }
    });
  }

  close = () => {
    this.props.close();
  }

  projectNameChange = (data) => {
    const item = this.props.projectInfo.filter((item) => item.name === data)[0];
    this.props.projectCode(item.id);
    this.props.form.setFieldsValue({
      projectType: item.type,
      projectNo: item.code
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目名称" {...formItemLayout}>
                {getFieldDecorator('projectName', {
                  rules: [{ required: true, message: '请输入项目名称！' }],
                  initialValue: this.props.modifyRecord.projectName
                })(
                  <Select allowClear placeholder="请选择项目名称" onChange={this.projectNameChange}>
                    {
                      this.props.projectInfo.map((item, index) =>
                        <Option key={index} value={item.name}>{item.name}</Option>
                      )
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目类别" {...formItemLayout}>
                {getFieldDecorator('projectType', {
                  initialValue: this.props.modifyRecord.projectType
                })(
                  <Input placeholder="项目类别" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="项目编号" {...formItemLayout}>
                {getFieldDecorator('projectNo', {
                  initialValue: this.props.modifyRecord.projectNo
                })(
                  <Input placeholder="项目编号" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="任务简述" {...formItemLayout}>
                {getFieldDecorator('taskDesc', {
                  rules: [{ required: true, message: '请输入任务简述！' }],
                  initialValue: this.props.modifyRecord.taskDesc
                })(
                  <Input placeholder="任务简述" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="当前进展" {...formItemLayout}>
                {getFieldDecorator('progressType', {
                  rules: [{ required: true, message: '请输入当前进展！' }],
                  initialValue: this.props.modifyRecord.progressType
                })(
                  <Input type="number" step={1} min={0} max={100} placeholder="当前进展" addonAfter="%" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="本周投入时间" {...formItemLayout}>
                {getFieldDecorator('workHour', {
                  rules: [{ required: true, message: '请输入本周投入时间！' }],
                  initialValue: this.props.modifyRecord.workHour
                })(
                  <Input type="number" min={0} step={0.1} max={40} placeholder="本周投入时间" addonAfter="小时" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="预期完成时间" {...formItemLayout}>
                {getFieldDecorator('expectDate', {
                  rules: [{ required: true, message: '请输入预期完成时间！' }],
                  initialValue: this.props.modifyRecord.expectDate
                })(
                  <DatePicker placeholder="预期完成时间" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="是否延期" {...formItemLayout}>
                {getFieldDecorator('delay', {
                  rules: [{ required: true, message: '请选择是否延期！' }],
                  initialValue: this.props.modifyRecord.delay || false
                })(
                  <Select allowClear>
                    <Option value={true}>是</Option>
                    <Option value={false}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="问题和风险" {...formItemLayout}>
                {getFieldDecorator('risk', {
                  rules: [{ required: true, message: '请输入问题和风险' }],
                  initialValue: this.props.modifyRecord.risk
                })(
                  <Input placeholder="问题和风险" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm);
